import React from 'react';
import { Menu, Layout } from 'antd';
import type { MenuProps } from 'antd';
import { 
  HomeOutlined, 
  UserOutlined, 
  SettingOutlined, 
  DatabaseOutlined, 
  BarChartOutlined,
  PieChartOutlined,
  LineChartOutlined,
  LogoutOutlined,
  TeamOutlined,
  FileTextOutlined,
  FolderOpenOutlined,
  MessageOutlined
} from '@ant-design/icons';

const { Sider } = Layout;

// 定义菜单项类型
interface MenuItem {
  key: string;
  icon: React.ReactNode;
  label: string;
  children?: MenuItem[];
}

interface SidebarMenuProps {
  collapsed?: boolean;
  onCollapse?: (collapsed: boolean) => void;
  selectedKeys?: string[];
  onSelect?: (selectedKeys: string[]) => void;
}

/**
 * 侧边栏菜单组件
 */
const SidebarMenu: React.FC<SidebarMenuProps> = ({
  collapsed = false,
  // onCollapse,
  selectedKeys = ['home'],
  onSelect
}) => {
  // 模拟菜单项数据
  const menuItems: MenuItem[] = [
    {
      key: 'home',
      icon: <HomeOutlined />,
      label: '首页'
    },
    {
      key: 'users',
      icon: <UserOutlined />,
      label: '用户管理',
      children: [
        { key: 'users-list', icon: <UserOutlined />, label: '用户列表' },
        { key: 'users-add', icon: <UserOutlined />, label: '新增用户' },
        { key: 'users-groups', icon: <TeamOutlined />, label: '用户组' }
      ]
    },
    {
      key: 'data',
      icon: <DatabaseOutlined />,
      label: '数据管理',
      children: [
        { key: 'data-tables', icon: <DatabaseOutlined />, label: '数据表' },
        { key: 'data-import', icon: <FileTextOutlined />, label: '数据导入' },
        { key: 'data-export', icon: <FileTextOutlined />, label: '数据导出' }
      ]
    },
    {
      key: 'reports',
      icon: <BarChartOutlined />,
      label: '报表统计',
      children: [
        { key: 'reports-daily', icon: <LineChartOutlined />, label: '日报' },
        { key: 'reports-monthly', icon: <LineChartOutlined />, label: '月报' },
        { key: 'reports-analysis', icon: <PieChartOutlined />, label: '数据分析' }
      ]
    },
    {
      key: 'system',
      icon: <SettingOutlined />,
      label: '系统设置',
      children: [
        { key: 'system-config', icon: <SettingOutlined />, label: '配置管理' },
        { key: 'system-logs', icon: <FileTextOutlined />, label: '日志管理' },
        { key: 'system-files', icon: <FolderOpenOutlined />, label: '文件管理' }
      ]
    },
    {
      key: 'messages',
      icon: <MessageOutlined />,
      label: '消息中心'
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录'
    }
  ];

  // 处理菜单项选择
  const handleSelect: MenuProps['onSelect'] = ({ keyPath }) => {
    if (onSelect) {
      onSelect(keyPath);
    }
    // 这里可以处理路由跳转等逻辑
    console.log('Selected menu:', keyPath);
  };

  // 递归转换menuItems为antd Menu组件需要的格式
  const convertToMenuItems = (items: MenuItem[]): MenuProps['items'] => {
    return items.map(item => ({
      key: item.key,
      icon: item.icon,
      label: item.label,
      children: item.children ? convertToMenuItems(item.children) : undefined
    }));
  };

  return (
    <Sider
      width={256}
      theme="light"
      // collapsible
      // collapsed={collapsed}
      // onCollapse={onCollapse}
      style={{
        position: 'fixed',
        height: '100vh',
        left: 0,
        top: 0,
        zIndex: 100,
        backgroundColor: 'var(--primary-color)'
      }}
    >
      <div style={{
        display: 'flex',
        alignItems: 'center',
        height: 64,
        padding: '0 20px',
        fontSize: '16px',
        fontWeight: 'bold',
        color: '#fff'
      }}>
        {!collapsed && 'UNO管理平台'}
      </div>
      <Menu
        mode="inline"
        selectedKeys={selectedKeys}
        onSelect={handleSelect}
        items={convertToMenuItems(menuItems)}
        style={{
          height: 'calc(100vh - 64px)',
          borderRight: 0,
          backgroundColor: 'var(--primary-color)',
        }}
      />
    </Sider>
  );
};

export default SidebarMenu;